<template>
    <div>
        <v-list-tile @click="toggle" class="level1 py-0 my-0" :class="{'selected':isSelected}">
            <v-list-tile-avatar class="px-1">
                <v-icon v-if="model.isParent">{{open ? 'folder_open' : 'folder'}}</v-icon>
                <v-icon v-if="!model.isParent">insert_drive_file</v-icon>
            </v-list-tile-avatar>
            <v-list-tile-content>
                <v-list-tile-title v-show="!beginEdit">
                    <span>{{model.name}}</span>
                </v-list-tile-title>
                <input v-show="beginEdit" @click.stop="" :ref="model.id" v-model="model.name"
                       @blur="afterEdit" @keydown.enter="afterEdit"/>
            </v-list-tile-content>
            <v-list-tile-action v-if="isEdit">
                <v-btn icon @mouseover="c1='primary'" @mouseout="c1=''" :color="c1" @click.stop="addChild">
                    <i class="el-icon-plus"/>
                </v-btn>
            </v-list-tile-action>
            <v-list-tile-action v-if="isEdit">
                <v-btn icon @mouseover="c2='success'" @mouseout="c2=''" :color="c2" @click.stop="editChild">
                    <i class="el-icon-edit"/>
                </v-btn>
            </v-list-tile-action>
            <v-list-tile-action v-if="isEdit">
                <v-btn icon @mouseover="c3='error'" @mouseout="c3=''" :color="c3" @click.stop="deleteChild">
                    <i class="el-icon-delete"/>
                </v-btn>
            </v-list-tile-action>
        </v-list-tile>

        <v-list v-if="isFolder" v-show="open" class="ml-4 pt-0 pb-0" dense transition="scale-transition">
            <tree-item
                    class="item"
                    v-for="(model, index) in model.children"
                    :key="index"
                    :model="model"
                    :url="url"
                    :isEdit="isEdit"
                    :nodes="nodes"
                    :parentState="open"
                    @handleAdd="handleAdd"
                    @handleEdit="handleEdit"
                    @handleDelete="handleDelete"
                    @handleClick="handleClick"
            >
            </tree-item>
        </v-list>
    </div>
</template>

<script>
    import Vue from 'vue'

    export default {
        name: "tree-item",
        props: {
            model: Object,
            url: String,
            isEdit: {
                type: Boolean,
                default: false
            },
            nodes: Object,
            parentState: Boolean
        },
        created() {
        },
        data: function () {
            return {
                c1: '',
                c2: '',
                c3: '',
                isSelected: false,
                open: false,
                beginEdit: false
            }
        },
        watch: {
            parentState(val) {
                if (!val) {
                    this.open = val;
                }
            }
        },
        computed: {
            isFolder: function () {
                return this.model.children && this.model.children.length > 0;
            }
        },
        methods: {
            toggle: function () {
                // 将其它被选中项取消选中
                this.nodes.selected.isSelected = false;
                // 当前项被选中
                this.isSelected = true;
                // 保存当前选中项
                this.nodes.selected = this

                // 客户自己的点击事件回调
                this.handleClick(this.model);

                // 判断是否为顶级节点，顶级节点需要记录和替换
                if (this.model.parentId == 0) {
                    // 判断打开节点是否是自己
                    if (this.nodes.opened && this != this.nodes.opened) {
                        // 不是，则关闭原来的节点
                        this.nodes.opened.open = false;
                    }
                    // 将自己记录为打开的节点
                    this.nodes.opened = this;
                }
                // 切换开闭状态
                this.open = !this.open;
                // 如果已经是叶子节点,或者自己是关闭的，或者自己已经有儿子了，结束
                if (!this.model.isParent || this.isFolder || !this.open) {
                    return;
                }
                // 展开后查询子节点
                this.$http.get(this.url, {params: {pid: this.model.id}})
                    .then(resp => {
                        Vue.set(this.model, 'children', resp.data);
                        // 封装当前节点的路径
                        this.model.children.forEach(n => {
                            n['path'] = [];
                            this.model.path.forEach(p => n['path'].push(p));
                            n['path'].push(n.name);
                        });
                    }).catch(e => {
                    console.log(e);
                });
            },
            addChild: function () {
                let child = {
                    name: '新的节点',
                    parentId: this.model.id,
                    isParent: false,
                    sort: this.model.children ? this.model.children.length + 1 : 1
                };
                if (!this.model.isParent) {
                    Vue.set(this.model, 'children', [child]);
                    this.model.isParent = true;
                    this.open = true;
                    this.handleAdd(child);
                } else {
                    if (!this.isFolder) {
                        this.$http.get(this.url, {params: {pid: this.model.id}}).then(resp => {
                            Vue.set(this.model, 'children', resp.data);
                            this.model.children.push(child);
                            this.open = true;
                            this.handleAdd(child);
                        });
                    } else {
                        this.model.children.push(child);
                        this.open = true;
                        this.handleAdd(child);
                    }
                }
            },
            deleteChild: function () {
                this.$message.confirm('此操作将永久删除数据，是否继续?', '提示', {
                    confirmButtonText: '确定删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleDelete(this.model.id);
                }).catch(() => {
                    this.$message.info('已取消删除');
                })
            },
            editChild() {
                this.beginEdit = true;
                this.$nextTick(() => this.$refs[this.model.id].focus());
            },
            afterEdit() {
                if (this.beginEdit) {
                    this.beginEdit = false;
                    this.handleEdit(this.model.id, this.model.name);
                }
            },
            handleAdd(node) {
                this.$emit("handleAdd", node);
            },
            handleDelete(id) {
                this.$emit("handleDelete", id);
            },
            handleEdit(id, name) {
                this.$emit("handleEdit", id, name)
            },
            handleClick(node) {
                this.$emit("handleClick", node);
            }
        }
    }
</script>

<style scoped>
    .level1 {
        height: 40px;
    }

    .selected {
        background-color: rgba(105, 184, 249, 0.75);
    }

    .material-icons {
        line-height: 1.7
    }
</style>
